<script setup>
import loading from "../components/loading.vue"
import { useRouter } from 'vue-router'
import { ref,onMounted } from 'vue'
import {mostExpected,comingList} from '../api/api.ts'
import { cityPinia } from '../stores/home'
import { storeToRefs } from 'pinia'

const router = useRouter()
const cityStore = cityPinia()
const {cityId} = storeToRefs(cityStore)
const cityStoreChange =(id)=>{
  cityStore.$patch(state=>{
    state.cityId = id 
  })
}
const mostExpectedList = ref()
const getMostExpected =async (ci)=>{
    let data = await mostExpected(ci)
    mostExpectedList.value = data.coming
    // console.log(data);
}
const comingMovieList = ref([])
const comingInfo = ref([])
const TimeMovieList = ref([])

const getComingList = async (ci)=>{
    let data =await comingList(ci)
    comingMovieList.value = data.coming
    comingInfo.value[0]= 
    {
        'date':comingMovieList?.value[0]?.comingTitle,
        'list':[]
    }
    let timeList = []
    for(let i = 0; i < data.coming.length; i++){
        let time = data.coming[i].comingTitle
        if(timeList.indexOf(time) === -1){
            timeList.push(time)
        }
    }

    for(let j = 0;j < timeList.length; j++){
        let obj =  {
            date: timeList[j],
            list: []
        }
        for(let i = 0; i < data.coming.length; i++){
            
            if(timeList[j] === data.coming[i].comingTitle){
                obj.list.push(data.coming[i])
            }
        }
        
        TimeMovieList.value.push(obj)
    }
    
    // console.log("用时间分组",TimeMovieList.value);
}

const goMovieDetail = (mid) => {
    router.push({
        name:'movieDetail',
        params: {
            id: mid, 
        }
    })
}

onMounted(()=>{
    getMostExpected(cityId.value)
    getComingList(cityId.value)
    
})
</script>

<template>
    <div class="most-expected">
        <div class="title">近期最受期待</div>
        <loading v-if="!mostExpectedList"></loading>
        <div class="movies-wrapper">
                <ul class="movies">
                    <li class="movies-item" v-for="el in mostExpectedList" :key="el.id" @click="goMovieDetail(el.id)">
                        <div class="poster">
                            <img :src="el.img" alt="">
                            <div class="mask"></div>
                            <span class="wish">{{ el.wish }}想看</span>
                            <div class="like">
                                <van-icon name="like" />
                            </div>
                        </div>
                        <p class="movie-name"><van-text-ellipsis :content="el.nm" /></p>
                        <p class="coming">{{ el.comingTitle.split(' ')[0] }}</p>
                    </li>
                </ul>
            </div>
    </div>
    <div class="diliver"></div>
    <div class="coming-show">
        <div class="coming-date">
            <loading v-if="!TimeMovieList"></loading>
            <ul>
                <li v-for="(el,index) in TimeMovieList" :key="index" class="date-item">
                    <div class="date">{{ el.date }}</div>
                    <ol class="date-movies">
                        <li v-for="ele in el.list" :key="ele.id" @click="goMovieDetail(ele.id)">
                            <img :src="ele.img" alt="">
                            <div class="right">
                                <div class="content">
                                    <div class="title">
                                        <span class="nm">{{ ele.nm }}</span>
                                        <div class="version" v-if="ele.version==='v2d imax'">
                                            <img src="../assets/imgs/v2dimax.png" alt="">
                                        </div>
                                        <div class="version" v-else-if="ele.version==='v3d imax'">
                                            <img src="../assets/imgs/v3dimax.png" alt="">
                                        </div>
                                    </div>
                                    <div class="wish">
                                        <span>{{ ele.wish }}</span>想看
                                    </div>
                                    <p class="star">
                                        <van-text-ellipsis :content="`主演：`+(ele.star?ele.star:'未知')" />
                                    </p>
                                    <p class="coming-time">{{ ele.rt }}上映</p>
                                </div>
                                <button v-if="ele.showStateButton" :style="{
                                    'backgroundColor':ele?.showStateButton?.color,
                                    'boxShadow':ele?.showStateButton?.shadowColor}">
                                    {{ ele?.showStateButton?.content }}
                                </button>
                                <button v-else :style="{
                                    'backgroundColor':'#faaf00'}">想看</button>
                            </div>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.most-expected{
    padding: 15px;
    .title{
        margin-bottom: 12px;
        font-size: 14px;
        color: #333;
    }
    .movies-wrapper{
        max-height: 160px;
        overflow: hidden;
    }
    .movies{
        display: flex;
        max-width: 100%;
        overflow: auto;
        padding-bottom: 10px;
        .movies-item{
            margin-right: 10px;
            .poster{
                position: relative;
                img{
                    width: 85px;
                    height: 115px;
                    position: relative;
                }
                .mask{
                    position: absolute;
                    width: 85px;
                    height: 35px;
                    bottom: 0;
                    background-image: linear-gradient(-180deg,rgba(77,77,77,0),#000);
                }
                .wish{
                    position: absolute;
                    bottom: 4px;
                    left: 6px;
                    font-weight: 600;
                    color: #faaf00;
                    font-size: 11px;
                }
                .like{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 28px;
                    height: 28px;
                    color: #ddd;
                    background-color: rgba(61,63,71,.6);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .van-icon{
                        font-size: 10px;
                    }
                }
            }
            .van-text-ellipsis{
                font-size: 13px;
                font-weight: bold;
                color: #222;
                margin: 5px 0 3px;
            }
            .coming{
                font-size: 13px;
                color: #999;
            }
        }
    }
}
.diliver{
    height: 10px;
    background-color: #f4f4f4;
}
.coming-show{
    padding: 0 15px;
    margin-bottom: 50px;
    .coming-date{
        ul li{
            margin-top: 12px;
            .date{
                font-size: 15px;
                
            }
            .date-movies li{
                    display: flex;
                    align-items: center;
                    img{
                        width: 64px;
                        height: 90px;
                        margin-right: 10px;
                    }
                    .right{
                        display: flex;
                        flex: 1;
                        align-items: center;
                        justify-content: space-between;
                        border-bottom: 1px solid #eee;
                        button{
                            outline: none;
                            border: none;
                            color: #fff;
                            font-size: 14px;
                            border-radius: 999px;
                            padding: 8px 12px;
                        }
                    }
                    .content{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        height: 90px;
                        width: 80%;
                        color: #666;
                        font-size: 13px;
                        padding: 10px 0;
                        .title{
                            display: flex;
                            img{
                                width: 43px;
                                height: 14px;
                            }
                        }
                        .nm{
                            color: #333;
                            font-weight: bolder;
                            font-size: 16px;
                            margin-right: 5px;
                        }
                        .wish{
                            span{
                                color: #faaf00;
                                font-size: 16px;
                                font-weight: 700;
                            }
                        }
                    }
                }
        }
    }
}
</style>